<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>RadialGradient</title>
</head>

<body>
  <!-- 
      - id: 渐变唯一名称
      - cx: 渐变中心的 x 坐标
      - cy: 渐变中心的 y 坐标
      - fx: 渐变焦点的 x 坐标
      - fy: 渐变焦点的 y 坐标
    -->
  <!-- 对称渐变（中心和焦点一致） -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <defs>
    <radialGradient id="grad1" fx="50%" fy="50%" r="50%">
      <stop offset="0" stop-color="red" stop-opacity="1" />
      <stop offset="50%" stop-color="green" stop-opacity="1" />
      <stop offset="100%" stop-color="blue" stop-opacity="1" />
    </radialGradient>
    </defs>
    <ellipse cx="100" cy="75" rx="100" ry="50" fill="url(#grad1)" />
  </svg>
  <!-- 非对称渐变（中心和焦点不一致） -->
  <!-- 焦点设置在 x 轴 50%，y 轴 10%。原点在左上角 -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <radialGradient id="grad2" cx="50%" cy="50%" fx="50%" fy="10%" r="50%">
        <stop offset="0%" stop-color="red" stop-opacity="0" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="75" rx="100" ry="50" fill="url(#grad2)" />
  </svg>

  <!-- spreadMethod：渐变颜色在定义范围外如何延伸 -->
   <!-- 可选值：pad(最后一种颜色延伸)，reflect(对称渐变 红 -> 蓝 -> 蓝 -> 红)，repeat(重复渐变 红 -> 蓝 -> 红 -> 蓝) -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <radialGradient id="grad3" cx="25%" cy="25%" fx="25%" fy="25%" r="50%" spreadMethod="reflect">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <ellipse cx="120" cy="75" rx="100" ry="50" fill="url(#grad3)" />
  </svg>
  <!-- gradientUnits：渐变坐标和尺寸如何计算，决定了渐变的起点、终点和半径基于“图形自身”还是“画布”定义 -->
   <!-- 
    可选值：
      - objectBoundingBox：基于图形，相对于被引用元素的坐标
      - userSpaceOnUse：基于画布，相对于 svg 画布的坐标
   -->
   <svg width="300" height="150" viewBox="0 0 150 100" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"style="background-color: green;">
    <rect x="0" y="0" width="100%" height="100%" style="fill: lightgray;"/>
    <defs>
      <radialGradient id="grad4" cx="50%" cy="50%" r="50%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="100" height="75" fill="url(#grad4)"/>
    <circle cx="50%" cy="50%" r="2" style="fill:black"/>
  </svg>
  <!-- 
    上面示例：
      - svg 尺寸：300宽，150高
      - svg 画布尺寸： 150宽，100高
      - svg 画布实际显示尺寸：viewBox 受 preserveAspectRatio 的影响。preserveAspectRatio="xMinYMin meet", 所以画布是基于左上角对齐，不裁剪，不拉伸。
      因为不裁剪，则根据小比例缩放，即根据高度150/100 = 1.5 的比例缩放，最终得到 150 * 1.5 高，100 * 1.5，
      则 viewBox 会被等比例缩放到 225 * 150
      - 矩形尺寸：因为画布比例是1.5，所以宽高是 150 * 112.5
      - 渐变：因为 gradientUnits="userSpaceOnUse"，所以渐变是基于画布的，而不是基于矩形的，所以中心点实际在画布的中间（即黑色圆点）
   -->
</body>

</html>